<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
  <div>
    <h1></h1>
    <!-- 条件查询。 inline 属性设置表单变为行内的表单域 -->
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchMap"
      style="margin-top: 20px;"
    >
      <!-- 有prop才可以重置 -->
      <el-form-item prop="xm">
        <el-input
          v-model="searchMap.xm"
          placeholder="姓名"
          style="width: 200px;"
        ></el-input>
      </el-form-item>
      <el-form-item prop="sfzhm">
        <el-input
          v-model="searchMap.sfzhm"
          placeholder="身份证号"
          style="width: 200px;"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
<!--        <el-button type="primary" icon="el-icon-search" @click="fetchData">重置</el-button>-->
        <a href="muban.xlsx" rel="external nofollow" download="模板" style="margin-left:15px"><el-button type="success">下载批量模板</el-button></a>
      </el-form-item>

      <el-upload class="upload-demo" style="margin-bottom: 20px" ref="upload" action="doUpload" :limit="1" :file-list="fileList" :before-upload="beforeUpload">
        <!--<a href="muban.xlsx" rel="external nofollow" download="模板" style="margin-right:10px"><el-button size="small" type="success">下载模板</el-button></a>-->
        <el-button size="small" type="primary" slot="trigger" style="margin-right: 10px;">选择文件</el-button>
        <el-button size="small" type="primary" @click="submitUpload()">上传</el-button>
        <div slot="tip" style="display: inline-block;margin-left: 20px;vertical-align: middle" class="el-upload-list__item-name" v-if="fileName">上传文件：{{fileName}}</div>
        <el-button size="small" type="success" @click="refresh()" v-if="fileName" v-model="currwjid">刷新</el-button>
        <el-button size="small" type="primary" style="float: right" v-if="fileName" v-model="currwjid" @click="excelExport()">导出</el-button>
        <!--<el-button @click="visible = false">取消</el-button>-->
        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
        <!--<div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过5MB</div>-->
      </el-upload>

    </el-form>
    <!-- 列表-->
    <!-- :data 绑定渲染的数据；border: 边框; -->
    <el-table :data="list" height="380" border style="width: 100%">
      <el-table-column prop="xm" label="姓名"></el-table-column>
      <el-table-column prop="sfzhm" label="身份证号"></el-table-column>
      <el-table-column prop="scjglx" label="审查结果类型"></el-table-column>
      <el-table-column prop="scjgmx" label="审查结果明细"></el-table-column>
      <!--<el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>-->
    </el-table>



    <span slot="footer" class="dialog-footer">

</span>

  </div>
</template>

<script>
import memberApi from "@/api/member";

export default {
  data() {
    return {
      list: [],
      searchMap: {
        xm: "",
        sfzhm: ""
      }, // 条件查询绑定条件值
      fileName: "",
      fileList: [],
      currwjid: "",
      dialogFormVisible: false, // 控制新增对话框
      // 校验规则
      rules: {
        cardNum: [{ required: true, message: "身份证号不能为空", trigger: "blur" }],
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }]
      }
    };
  },


  // 钩子函数获取数据
  created() {
    //刚进来不做任何操作
  },
  methods: {
    // 在 el-form-item 标签属性 prop 上, 指定了字段名, 重置才会生效
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    fetchData() {
      this.list=[];
      let sfzhm = this.searchMap.sfzhm;
      let xm = this.searchMap.xm;
      if(!sfzhm && !xm){
        this.$message({
          message:'请输入姓名和身份证号再查询！',
          type:'error',
          showClose:true
        });
        return;
      }
       memberApi.search(this.searchMap).then(response => {
         console.log(this.searchMap);
          const res = response.data;
          const code = res.code;
          const success = res.success;
          if(code == 200 && success){
            var isContactPerson = res.isContactPerson;
            if(isContactPerson == "1"){
              var datalist = res.data;
              if(datalist != null && datalist.length > 0){
                var ryxx = {};
                ryxx.scjglx = "密切接触者";
                ryxx.xm = this.searchMap.xm;
                ryxx.sfzhm = this.searchMap.sfzhm;
                var scjgmx = "";
                for(var i=0; i<datalist.length; i++){
                  scjgmx += "接触日期："+datalist[i].jcrq+"，接触类型："+datalist[i].jclx+"；";
                }
                ryxx.scjgmx = scjgmx;
                this.list.push(ryxx);
              }
            }else{
              var data = res.data;
              if(data != null){
                console.log(data);
                var ryxx = {};
                ryxx.xm = data.xm;
                ryxx.sfzhm = data.sfzhm;
                ryxx.scjglx = data.bllx;
                ryxx.scjgmx = "确诊时间："+data.qzsj+"，发病时间："+data.fbsj;
                this.list.push(ryxx);
              }else{
                var ryxx = {};
                ryxx.xm = this.searchMap.xm;
                ryxx.sfzhm = this.searchMap.sfzhm;
                ryxx.scjglx = "无";
                ryxx.scjgmx = "无";
                this.list.push(ryxx);
              }
            }
          }else{
            const message = res.message;
            this.$message({
              message: message,
              type:'error',
              showClose:true
            });
          }
      });
    },
    beforeUpload(file){
      this.searchMap.xm="";
      this.searchMap.sfzhm="";
      this.list=[];
      this.files = file;
      const extension = file.name.split('.')[1] === 'xls';
      const extension2 = file.name.split('.')[1] === 'xlsx';
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!');
        return
      }
      if (!isLt2M) {
        this.$message.warning('上传模板大小不能超过 5MB!');
        return;
      }
      this.fileName = file.name;
      return false; // 返回false不会自动上传
    },
    submitUpload() {
      console.log('上传'+this.files.name);
      if(this.fileName == ""){
        this.$message.warning('请选择要上传的文件！');
        return false;
      }
      let fileFormData = new FormData();
      fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
      memberApi.uploadfile(fileFormData).then(response => {
        const res = response.data;
        console.log(res);
        const success = res.success;
        if(success){
          this.currwjid = res.wjid;
          const message = res.message;
          this.$message({
            message:message,
            type:'success',
            showClose:true
          });
        }
      });
    },
    excelExport(){
      var wjid = this.currwjid;
      if(!wjid){
        this.$message({
          message:'请先点击上传按钮上传文件！',
          type:'error',
          showClose:true
        });
        return;
      }
      let param = {"wjid" : wjid};
      memberApi.downloadfile(param).then( response => {
        console.log(response); // 此处res为bolb类文件对象 Blob(4412) {size: 4412, type: "application/octet-stream"}
        var blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //type这里表示xlsx类型
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = "疫情信息查询结果.xlsx";
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }).catch(err => {
        this.$message({
          message:'下载失败！',
          type:'error',
          showClose:true
        });
      });
    },
    refresh(){
      var wjid = this.currwjid;
      if(!wjid){
        this.$message({
          message:'请先点击上传按钮上传文件！',
          type:'error',
          showClose:true
        });
        return;
      }
      let param = {"wjid":wjid};
      memberApi.getList(param).then(response => {
        const res = response.data;
        const success = res.success;
        if(success){
          const data = res.data;
          this.list = data.ryxxlist;
        }else{
          const message = res.message;
          this.$message({
            message: message,
            type:'error',
            showClose:true
          });
        }
      });
    }
  }
};
</script>
